<template>
    <!-- 课程管理 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="状态：">
                    <el-select v-model="formInline.status" placeholder="请选择" clearable>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="退款中" value="1"></el-option>
                        <el-option label="已退款" value="2"></el-option>
                        <el-option label="已拒绝" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关联订单号：">
                    <el-input v-model="formInline.order_no" placeholder="请输入搜索订单号"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号：">
                    <el-input v-model="formInline.mobile" placeholder="请输入搜索用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="申请时间:">
                    <el-date-picker v-model="formInline.created_at" format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                </el-form-item>

            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData" max-height="650" highlight-current-row :row-style="{height: '20px'}"
                      :summary-method="getSummaries"
                      show-summary
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="ID" width="60">
                </el-table-column>
                <el-table-column prop="course_name" align="center" label="课程名称">
                    <template slot-scope="scope">
                        <!--                        <a class="buttonText" :href="'/#/course?id='+scope.row.course_id">-->
                        {{ scope.row.course_name }}
                        <!--                        </a>-->
                    </template>
                </el-table-column>
                <el-table-column prop="price" align="center" label="单价"></el-table-column>
                <el-table-column prop="user_nickname" align="center" label="用户姓名"></el-table-column>
                <el-table-column prop="mobile" align="center" label="用户手机号"></el-table-column>
                <el-table-column prop="order_no" align="center" label="关联订单号"></el-table-column>
                <el-table-column prop="num" align="center" label="退订节数"></el-table-column>
                <el-table-column prop="back_money" align="center" label="退款金额(元)"></el-table-column>
                <el-table-column prop="back_point" align="center" label="退款积分"></el-table-column>
                <el-table-column prop="status_name" align="center" label="状态"></el-table-column>
                <el-table-column prop="created_at" align="center" label="申请时间"></el-table-column>
                <el-table-column prop="updated_at" align="center" label="更新时间"></el-table-column>


                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 1" size="mini" type="success"
                                   @click="handleConsent(scope.row)">
                            确认退款
                        </el-button>
                        <el-button v-if="scope.row.status == 1" size="mini" type="warning"
                                   @click="handleRefuse(scope.row)">
                            拒绝退款
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>


    </div>
</template>

<script>

import {isEmpty} from "../../../api/http";

export default {
    name: "user_course_refund",
    data() {
        return {
            formInline: {
                status: "",
                order_no: "",
                mobile: ""
            },
            tableData: [
                {
                    id: 1,
                    name: "社区体能课（周一）",
                    type: "体能课程",
                    image: "/",
                    time: "每星期一17:00~18:00",
                    address: "宝安区四季公园",
                    desc: "这个课程是有助于儿童健康成长",
                    status: 1,
                },
            ],
            dataTotal: {
                title:'总计',
                num: 0,
                pay_money: 0,
                pay_point: 0,
            },
            id: 0,
            page: 1, //默认第一页
            limit: 15, //默认一页显示10条数据
            total: 0,

        };
    },
    created() {
        this.formInline.order_no = this.$route.query.order_no;
        this.getUserCourseRefundList();
    },
    activated() {
        this.formInline.order_no = this.$route.query.order_no;
        this.getUserCourseRefundList();
    },
    methods: {
        getSummaries(param) {
            const sums = [];
            sums[0] = this.dataTotal.title,
            sums[6] = this.dataTotal.num;
            sums[7] = this.dataTotal.back_money;
            sums[8] = this.dataTotal.back_point;
            return sums;
        },
        getUserCourseRefundList() {

            let params = {
                page: this.page,
                per_page: this.limit,
                status: this.formInline.status,
                order_no: this.formInline.order_no,
                mobile: this.formInline.mobile,
            };
            if (!isEmpty(this.formInline.created_at)) {
                params.start_created_at = this.formInline.created_at[0];
                params.end_created_at = this.formInline.created_at[1];
            }
            this.$get(this.$api.userCourseRefundApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list.data;
                    this.total = res.data.list.total;
                    if(this.page !=1){
                        this.dataTotal = [];
                    }else{
                        this.dataTotal = res.data.total;
                        this.dataTotal.title='总计';
                    }

                } else {
                    return this.$message.error(res.msg);
                }
            });
        },

        forEachFun(str) {
            let ids = [];
            if (str.length > 0) {
                ids = str.split(",");
                ids.forEach((item, index) => {
                    ids[index] = parseInt(ids[index])

                });
            }
            return ids;

        },

        // 确认退款
        handleConsent(row) {
            this.$confirm("此操作将退款至用户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$post(this.$api.userCourseRefundConsentApi, {id: row.id}).then((res) => {
                        if (res.code == 200) {
                            this.getUserCourseRefundList();
                            return this.$message.success(res.msg);
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
        // 拒绝退款
        handleRefuse(row) {
            this.$confirm("此操作将拒绝此次退款, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$post(this.$api.userCourseRefundRefuseApi, {id: row.id}).then((res) => {
                        if (res.code == 200) {
                            this.getUserCourseRefundList();
                            return this.$message.success("已拒绝！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getUserCourseRefundList();
        },
        handleCurrentChange(index) {
            this.page = index;
            this.getUserCourseRefundList();
        },


        // 点击查询按钮
        submitForm() {
            this.getUserCourseRefundList();
        },


    },
};
</script>

<style scoped>
.pagination {
    text-align: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.is-selected {
    color: #1989fa;
}
</style>
